<template>
  <div class="app-container" v-loading="loadings">
    <!-- 添加银行卡 -->
    <h5 class="titleInfo">银行卡详情</h5>
    <el-form :model="form" ref="form" disabled label-width="200px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="银行卡类型">
            <el-select v-model="form.accountType" placeholder="请选择">
              <el-option
                :label="item.name"
                :value="item.value"
                v-for="item in reviewStatusList"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 1.3.3.1办理 -->
        <div v-if="form.accountType == 2">
          <el-col :span="24">
            <el-form-item prop="dealType">
              <el-radio-group v-model.number="form.dealType">
                <el-radio :label="0">本人办理</el-radio>
                <el-radio :label="1">他人代办</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </div>
        <!-- 对私账户 -->
        <div v-if="form.accountType==2">
          <el-col :span="24">
            <el-form-item label="银行卡号" prop="cardNo">
              <el-input v-model="form.cardNo"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="开户行名称" prop="bankTitle">
              <el-input v-model="form.bankTitle"></el-input>

              <!-- <el-select v-model="form.bankTitle" filterable>
                <el-option
                  :label="item.name"
                  :value="item.value"
                  v-for="(item,index) in bankNameList"
                  :key="index"
                ></el-option>
              </el-select>-->
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="姓名">
              <el-input v-model="form.accountTitle"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="身份证号" prop="identity">
              <el-input v-model="form.identity" placeholder="请输入身份证号" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="手机号">
              <el-input v-model="form.phone"></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="24"> -->
          <div v-if="form.dealType==1">
            <el-form-item label="委托书及其附件" prop="attachment">
              <attachment ref="uploadImg" :file-num="6" :file-list="fileList" />
            </el-form-item>
          </div>
          <!-- </el-col> -->
          <!-- <el-col :span="24">
            <el-form-item label=" ">
              <p class="titlep">
                1、请先下载《委托书模板》
              </p>
              <p class="titlep">2、委托书盖章后请上传扫描件，并上传委托书要求的其余附件，最多允许上传6个附件，支持格式：JPG、PNG、JPEG</p>
            </el-form-item>
          </el-col>-->
        </div>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import attachment from "@/components/imgUpload/shopImgUp";
import { checkShopInfo } from "@/api/shopFinanceCard";
export default {
  name: "bankCardInfo",
  components: { attachment },
  data() {
    return {
      loadings: false,
      hospitalId: null,
      canClick: true, // 添加canClick
      fileList: [],
      ImgUrl: "https://img.yuepinyuemei.com/",
      form: {},
      // 银行卡类型下拉列表
      reviewStatusList: [
        // { name: "对公账户", value: "0" },
        { name: "对私账户", value: 2 },
      ],
    };
  },

  inject: ["reload"],
  mounted() {
    this.getInfo();
  },
  methods: {
    // 银行卡添加详情
    getInfo() {
      let datas = {
        id: Number(this.$route.query.id),
      };
      this.loadings = true;
      checkShopInfo(datas)
        .then((res) => {
          if (res.data.code == 0) {
            this.form = res.data.data;
            if (this.form.dealType != 0) {
              this.form.attachment = this.form.attachment.split(",");
            }
            // this.form.attachment = this.form.attachment.split(",");
            // if (this.form.attachment) {
            if (this.form.attachment && this.form.dealType != 0) {
              const attachments = this.form.attachment.map((item) => {
                return { url: this.ImgUrl + item };
              });
              this.fileList = attachments;
              this.$nextTick(() => {
                this.$refs.uploadImg.getLength(this.fileList);
              });
            }
          } else {
            this.$message({
              message: res.data.msg,
              type: "warning",
            });
          }
          this.loadings = false;
        })
        .catch((err) => {
          // this.errorStatus(err);
          this.loadings = false;
        });
    },
    //成功状态弹窗
    succStatus(txt, status) {
      this.eleMsg(txt, "success");
    },
    //失败状态弹窗
    errorStatus(txt) {
      this.eleMsg(txt, "error");
    },
    //弹窗组件
    eleMsg(txt, status) {
      this.$message({
        showClose: true,
        message: txt,
        type: status,
      });
    },
  },
};
</script>
<style scoped>
.app-container {
  padding: 0.1px !important;
}
.titlep {
  font-size: 12px;
  color: #606266;
  margin-bottom: 0;
}
</style>